<template>
  <!-- 共享列表-----注释 -->
  <div class="page" v-show="selectedTabId == 1">
    <div class="manage">
      <div class="btn" @click="batchSync">
        <i class="el-icon-circle-plus-outline"></i>
        <span>批量同步</span>
      </div>
      <!-- <div class="search"></div> -->
    </div>
    <div class="listAll">
      <ul class="listTitle">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        ></el-checkbox>
        <li>序号</li>
        <li>文件名称</li>
        <li>来源</li>
        <li>大小</li>
        <li>标签</li>
        <li>操作</li>
      </ul>
      <div class="list">
        <ul v-for="(item, index) in dataInfoList" :key="index">
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox :label="item">{{ item }}</el-checkbox>
          </el-checkbox-group>
          <li>{{ index + 1 }}</li>
          <li :title="item.fileName">{{ item.fileName }}</li>
          <li>{{ item.fileUrl }}</li>
          <li>{{ item.fileSize }}</li>
          <li>
            <tagsGroup :showTagsArr="[item.categoryTypeList[0].id]"></tagsGroup>
          </li>
          <li>
            <nav @click="synchronization(item.id)">
              <img src="../../assets/common/synchronization.png" alt="" /><span
                >同步</span
              >
            </nav>
          </li>
        </ul>
      </div>
    </div>
    <synchronization
      ref="synchronization"
      :clickItemId="clickItemId"
    ></synchronization>
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page.sync="current"
      :page-size="9"
      layout="prev, pager, next, jumper"
      :total="this.dataInfoList.length"
      style="text-align: right; margin: 0.2rem 0.6rem 0.2rem 0"
    >
    </el-pagination> -->
  </div>
</template>

<script>
import tagsGroup from "../common/tagsGroup";
import synchronization from "../common/synchronizationDialog";
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      checked: [], //选择的树的id数组
      isIndeterminate: false,
      dialogVisible: false, //默认模态框不显示
      // current: 1,
      arr: [],
      clickItemId: "", // 同步页  用于查询目标名称
    };
  },
  props: {
    selectedTabId: {
      default: () => 1,
    },
    dataInfoList: {
      default: () => [],
    },
  },
  updated() {
    console.log(this.dataInfoList);
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.dataInfoList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataInfoList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dataInfoList.length;
      console.log(value);
    },

    synchronization(id) {
      this.clickItemId = item.id;
      this.$api
        .shareZCData({
          dataIds: [id],
        })
        .then((res) => {
          console.log(res);
          let href = window.VUE_APP_BASE_URL + "/" + res;
          var eleLink = document.createElement("a");
          eleLink.download = "数据目录.html";
          eleLink.style.display = "none";
          // 字符内容转变成blob地址
          eleLink.href = href;
          // 触发点击
          document.body.appendChild(eleLink);
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
          this.$message({
            message: "同步成功！",
            type: "success",
            showClose: true,
          });
        });
    },
    // 批量同步  现在还未实现
    batchSync() {
      // this.$refs.synchronization.openDialog();
      console.log(this.checked);
      for (let i = 0; i < this.checkedCities.length; i++) {
        this.arr.push(this.checkedCities[i].id);
      }
      console.log(this.arr);
      this.$api
        .shareZCData({
          dataIds: this.arr,
        })
        .then((res) => {
          console.log(res);
          let href = window.VUE_APP_BASE_URL + "/" + res;
          var eleLink = document.createElement("a");
          eleLink.download = "数据目录.html";
          eleLink.style.display = "none";
          // 字符内容转变成blob地址
          eleLink.href = href;
          // 触发点击
          document.body.appendChild(eleLink);
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
          this.$message({
            message: "同步成功！",
            type: "success",
            showClose: true,
          });
        });
    },
  },
  components: {
    tagsGroup,
    synchronization,
  },
};
</script>

<style lang="scss" scoped>
.page {
  @import "~@/styles/mixin.scss";
  width: 100%;
  height: calc(100vh - 2rem);
  ::v-deep.el-dialog__body,
  ::v-deep.el-dialog__footer {
    background: #474747;
    color: #ffffff;
  }
  ::v-deep.el-dialog__header {
    background: #3e3d3d;
    & span {
      color: #ffffff;
    }
  }
  ::v-deep.el-form-item__label {
    color: #ffffff;
  }
  ::v-deep.el-input__inner {
    background: #383838;
    border-radius: 5px;
    color: #ffffff;
    border: none;
  }
}
.manage {
  display: flex;
  justify-content: space-between;
  margin-top: 0.23rem;
  margin-bottom: 0.23rem;
  .btn {
    width: 1.37rem;
    height: 0.33rem;
    font-size: 0.16rem;
    background: #1890ff;
    border-radius: 5px;
    line-height: 0.33rem;
    text-align: center;
    font-size: 0.14rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;

    i {
      margin-right: 8px;
    }
  }
  .search {
    width: 4rem;
    // height: 0.42rem;
    background: #2f2f2f;
    border: 1px solid #313030;
    border-radius: 5px;
  }
}
.listAll {
  min-height: 1rem;
  .listTitle {
    display: flex;
    height: 0.54rem;
    line-height: 0.54rem;
    font-size: 0.16rem;
    background: #034576;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #cccccc;
    li {
      width: 1.4rem;
      text-align: center;
    }
    ::v-deep.el-checkbox__inner {
      margin: 0 0.36rem 0 0.35rem;
    }
    li:nth-of-type(1) {
      width: 0.6rem;
    }
    li:nth-of-type(2) {
      width: 2.4rem;
      margin: 0 0.7rem;
    }
    li:nth-of-type(3) {
      width: 2.4rem;
      margin-left: 0.36rem;
    }
    li:nth-of-type(4) {
      margin: 0 1rem 0 1.24rem;
    }
    li:nth-of-type(5) {
      width: 2.2rem;
    }
  }
  .list {
    ::v-deep.el-checkbox__label {
      display: none;
    }
    ul {
      height: 0.54rem;
      line-height: 0.54rem;
      display: flex;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
      li {
        width: 1.4rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      ::v-deep.el-checkbox__inner {
        margin: 0 0.36rem 0 0.35rem;
      }
      li:nth-of-type(2) {
        width: 2.4rem;
        margin: 0 0.7rem;
      }
      li:nth-of-type(3) {
        width: 2.4rem;
        margin-left: 0.36rem;
      }
      li:nth-of-type(4) {
        margin: 0 1rem 0 1.24rem;
      }
      li:nth-of-type(5) {
        width: 2.2rem;

        ::v-deep div {
          padding: 0 0.2rem;
          margin: 0.08rem auto;
        }
      }
      li:nth-of-type(6) {
        margin-top: 0.16rem;
        nav {
          width: 88px;
          height: 28px;
          background: #1890ff;
          border-radius: 5px;
          line-height: 28px;
          margin: auto;
          font-size: 0.14rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
          img {
            margin: 0.08rem 0.06rem;
          }
        }
      }
      li:nth-of-type(1) {
        width: 0.6rem;
      }
    }
  }
}
</style>
